<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 8 } }">
          <a-form-item label="API Key">
            <a-row :gutter="16">
              <a-col :span="20"><a-input v-decorator="['apiKey']" disabled placeholder="请输入APP Key" /></a-col>
              <a-col :span="4"></a-col>
            </a-row>
          </a-form-item>

          <a-form-item label="ApI Secret">
            <a-row :gutter="16">
              <a-col :span="20"><a-input v-decorator="['apiSecret']" disabled placeholder="请输入App Secret" /></a-col>
              <a-col :span="4"><a-button type="primary" @click="handleUpdateApiKey" :loading="keyLoading">刷新密钥</a-button></a-col>
            </a-row>
            
          </a-form-item>
          <a-form-item label="回调地址">
            <a-row :gutter="16">
              <a-col :span="20"><a-input v-decorator="['callbackUrl',{ rules: [{ required: true, message: '回调地址不能为空' },{ required: true, validator: validateCallBack}] }]" placeholder="请输入回调地址" /></a-col>
              <a-col :span="4"><a-button type="primary" @click="handleUpdateCallback" :loading="callbackLoading">保存</a-button></a-col>
            </a-row>
            
          </a-form-item>
          <!-- <a-form-item :wrapper-col="{ sm: { offset: 4, span: 8 } }">
            <a-button type="primary" @click="handleUpdateCallback">保存</a-button>
          </a-form-item> -->
        </a-form>
      </div>
      <!-- <step-by-step-modal ref="modal" @ok="handleOk" /> -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { settingApiGet, settingApiRefresh, settingApiUpdate } from '@/api/system'
import pick from 'lodash.pick'

const apiFields = ['apiKey', 'apiSecret', ]
const callbacFields = ['callbackUrl' ]
const fields = [...apiFields, ...callbacFields ]

export default {
  name: 'AWM-Set',
  data() {
    return {
      confirmLoading: false,
      // 高级搜索 展开/关闭
      // 查询参数
      // 加载数据方法 必须为 Promise 对象
      form: this.$form.createForm(this),
      details: {},
      keyLoading: false,
      callbackLoading: false,
      
    }
  },

  created() {
    fields.forEach((v) => this.form.getFieldDecorator(v))

    this.getDetails()
    // getRoleList({ t: new Date() })
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  methods: {
    validateCallBack(rule, value, callback) {
      const self = this;
      const form = self.form;
      console.log(value.indexOf('http://') ==0);
      console.log(value.indexOf('http://') ==0);
      if(!(value.indexOf('http://') ==0 || value.indexOf('https://')==0)){
        callback(new Error('回调地址需以http://或https://开头'))
      }
      callback()
    },
    getDetails() {
      settingApiGet().then((res) => {
        // this.details = res.data
        let data = pick(res.data, fields)
        this.form.setFieldsValue(data)
      })
    },
    handleUpdateApiKey(){
      this.keyLoading = true
      settingApiRefresh().then((res) => {
        let data = pick(res.data, apiFields)
        this.form.setFieldsValue(data)
      }).finally(()=>{
        this.keyLoading = false
      })
    },
    handleUpdateCallback(){
      this.callbackLoading = true
      this.form.validateFields(callbacFields,(errors, values)=>{
        if(errors){
          this.callbackLoading = false
          return false
        }
        settingApiUpdate(values).then((res) => {
        }).finally(()=>{
          this.callbackLoading = false
        })
      })
      
    },
  },
}
</script>

 